# DAY 5 HTML (一)

11th鐵人賽

fansen

團隊Bikini Bottom

2019-09-20 18:20:02

3226 瀏覽

分享至

要撰寫一個 Angular 的頁面、元件，html 絕對是必備的技能，在 HTML5 標準被提出後，又更加複雜了。其實筆者也是對 html 很陌生，我們先走一遍 Angular 的範例，認識一下用了哪些標籤。

基本結構

html 是一種標籤語言，而不是程式語言。其實很容易理解，一個　html　元素，基本上會是成對的標籤，把內容包起來，像是這樣：

<title>SpongeWebsite</title>

<title> 開始標籤
SpongeWebsite 內容
</title> 結束標籤
或是只有開始標籤，而沒有結束標籤：

<img src="https://s.aolcdn.com/hss/storage/midas/17f4b60aec299f212a456632b2311c5e/202565129/google-1200-2.jpg">

像img這個標籤，我們還可以給予他屬性src，用來指定圖片的網址。
現在你對html結構有了初步認識，開始標籤、屬性、內容、結束標籤。

接下來進入html主體，基本結構：

<html>
    <head></head>
    <body></body>
</html>

非常直觀，由頭跟身體組成，<head></head>裡面，可以定義一些資訊，像 title 、 description 等，或是引入一些 js 檔。
只有<body></body>裡的內容，會顯示在瀏覽器上。

index.html

我們看看index.html ：

<!-- index.html-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SpongeWebsite</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

首先第一行是html的註解方式，是用把內容包起來，像這樣：

<!-- 這裡填入註解-->

<!doctype>宣告這個檔案的類型，要宣告為html5，只要寫　<!doctype html>　就可以了，其他檔案類型如 HTML 4.01 Strict，他的宣告式就很長:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">...</html>

lang="en" 指定語系，幫助瀏覽器正確解碼。作用域是整個<html>...</html>包起來的範圍。

<head>... </head>

<meta charset="utf-8">指定編碼格式，有關於 UTF-8 或 Unicode ，可參考 UTF-8、
Unicode 進一步了解。
<title>SpongeWebsite</title> 定義網站的標題，也就是這邊顯示的字。
<base href="/"> 如果你的網頁有超連結設定成相對路徑，那麼就會導向以 <base> 設定為基底的URL。"/"會指定該html所屬的目錄。
比方我們在<body> </body>裡建立一個超連結的標籤:

  <a href="test.com">Link</a>

點選這個連結， URL 就會導向http://localhost:4200/test.com

如果設成絕對路徑：

  <a href="http://www.google.com">Link</a>

就能正確導向www.google.com，而不會經過base的URL。

<meta name="viewport" content="width=device-width, initial-scale=1">
設定頁面寬度等於裝置寬度，這樣在手機或平板上比較不容易跑版。width 是頁面寬度，可以是一個常數，initial-scale是縮放比例，預設為 1。
<link rel="icon" type="image/x-icon" href="favicon.ico">
設定 icon ， rel 指明與這個檔案的關係，簡單說就是這個檔案的用途。
type 要按照icon的檔案格式填入對應的MIME標籤， GIF 檔要填入 image/gif ， PNG要填入 image/png 。MIME稍微知道一下就好。
最後href則是檔案的路徑。
<link> 這個標籤比較常見的是用在匯入css，像這樣：

<link rel="stylesheet" href="https://assets.hackmd.io/build/emojify.js/dist/css/basic/emojify.min.css">

這邊的內容稍微理解就好。

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

因為這邊的內容是嵌在 index.html 的 <body></body> 裡，所以這邊看不到 <head> 、 <body> 標籤。

<div></div>
這個標籤本身沒有什麼意思，是一個通用容器，由style指定css內容"text-align:center"，讓 <div></div> 的內容置中對齊。
<h1></h1>
定義標題，~~其實看起來就是字變大而已~~。標籤有 <h1> ~ <h6> 六種，數字越大，字體越小。
<img> 載入圖片， width 指定圖片顯示的寬度， alt 可以填寫當圖片載入失敗時，要顯示的字，可以實驗看看把 src="..." 這段拿掉，就能看到 alt 的內容印在瀏覽器上。
src這段看起來像一串亂碼，其實是編碼過的資料。 data:image/svg+xml; 說明這個圖片是svg格式， base64 是編碼格式，把後面的資料餵進Base64 Decoder，馬上就能解析出內容:

有關SVG的補充資料，可參考 wiki。
<ul></ul>
用 <ul></ul> 包起來的內容是一個沒有順序的 list ， list 的每一項則是用 <li></li> 包起來。
<a>
剛剛我們有偷偷用過這個標籤，其實就是用於連結到其他網站。 target 是決定要在哪裡打開這個連結，指定為 _blank 即會開起新的分頁，如果指定成 _parent 、 _self 、 _top ，對於目前的頁面來說，效果都只會和 _self 一樣，在同個頁面開啟連結。
rel="noopener"，由於我們點下連結時，瀏覽器會執行 window.open(<URL>) ，此時會開啟一個視窗，那麼原先的頁面就是 window.opener 。如果網站有惡意程式碼，是可以把 window.opener 換成其他網站，達成釣魚網站的攻擊手法，所以這邊會設定 noopener 。相關範例可參考這邊的說明。
href
指定超連結的URL。